<template lang="">
    <el-dialog :model-value="show" title="分配角色" @close="$emit('hide')">
        <el-select
            v-model="list"
            multiple
            placeholder="暂无角色"
            
        >
            <el-option
                v-for="item in roles"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="$emit('hide')">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </div>
        </template>

    </el-dialog>
</template>

<script setup lang="ts">
import { ref , watch} from 'vue';
import { getRoleListApi,getRoleByUserIdApi ,updateRoleByUserIdApi} from '../api/index';
import { ElMessageBox } from 'element-plus';

//获取到的父组件的自定义事件hideAllocRole数据   然后在上面模板上面绑定一个方法
defineEmits(['hide'])

//获取父组件user.vue传入的参数 
const props = defineProps({
    show:{
        type:Boolean,
        default:false
    },
    id:{
        type:Number,
        default:0
    }

})

//数组
const list = ref<number[]>([])
const roles = ref<{value:number,label:string}[]>([]) //角色数据

//监听show变化，确保在显示时获取数据

//发送请求获取角色列表
getRoleListApi().then(res=>{
    if(res.data.code===200){
        // 检查返回数据是否为数组
        const roleData = Array.isArray(res.data.data) ? res.data.data : [];
        roles.value = roleData.map((item) => ({
            value:item.id,
            label:item.name
        }));
    }else{
        roles.value = []; // 设置默认空数组防止错误
    }
})

watch(()=>props.id,()=>{
    if(props.show){
        //发送请求获取用户角色列表
        getRoleByUserIdApi(props.id).then(res=>{
            if(res.data.code===200){    //获取到数据后给到前段页面去渲染到分配角色的默认选中框中
                // 检查返回数据是否为数组
                const roleData = Array.isArray(res.data.data) ? res.data.data : [];
                list.value = roleData.map((item:any) => item.id);
            }else{
                list.value = []; // 默认空数组
            }
        })
    }
})


// 定义接收父组件传递的参数 然后下面使用 emit('hide') 关闭弹窗 
// const emit = defineEmits(['hide'])
const submit = ()=>{
    //需要判断列表是否为空
    ElMessageBox.confirm('确认分配角色吗？','提示',{
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        type:'warning'
    }).then(()=>{
        //发送请求
        console.log('这里是分配的角色id',list.value)
        console.log('这里是用户的id',props.id)
        //调用分配角色的接口
        updateRoleByUserIdApi(props.id,list.value).then(res=>{
            if(res.data.code===200){
                ElMessageBox.alert('分配角色成功','提示',{
                    confirmButtonText:'确认',
                    type:'success'
                }).then(()=>{
                    ElMessageBox.close();
                    //关闭当前弹窗
                    //emit事件传递给父组件
                    //emit自定义事件  传递给父组件
                    //这里是分配角色成功后  关闭当前弹窗
                    //然后告诉父组件刷新数据
                    //emit自定义事件  传递给父组件
                    //这里是分配角色成功后  关闭当前弹窗
                    //然后告诉父组件刷新数据
                    // emit('hide',true)  //传递true代表刷新数据
                })
            }else{
                ElMessageBox.alert(res.data.info,'提示',{
                    confirmButtonText:'确认',
                    type:'error'
                }).then(()=>{
                    ElMessageBox.close();
                })
            }
        })  
    }).catch(()=>{
        ElMessageBox.close();
    })


}

</script>

<style scoped>
el-select{
    width: 50%;
    margin-top: 20px;
    display: block;
}
</style>